<template>
  <div class="user-detail-container">
    <!-- 页面标题和操作按钮 -->
    <div class="page-header">
      <h1>用户详情</h1>
      <div class="action-buttons">
        <el-button @click="handleGoBack">
          <el-icon><ArrowLeft /></el-icon> 返回列表
        </el-button>
        <el-button type="primary" @click="handleEdit">
          <el-icon><Edit /></el-icon> 编辑
        </el-button>
        <el-button
          :type="userInfo.status === 1 ? 'danger' : 'success'"
          @click="handleStatusChange"
        >
          {{ userInfo.status === 1 ? '禁用' : '启用' }}
        </el-button>
      </div>
    </div>

    <!-- 基本信息卡片 -->
    <el-card class="info-card">
      <div class="card-header">
        <h2 class="card-title">基本信息</h2>
      </div>
      <el-descriptions :column="1" border class="info-descriptions">
        <el-descriptions-item label="用户ID">{{ userInfo.id }}</el-descriptions-item>
        <el-descriptions-item label="用户名">{{ userInfo.username }}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{ userInfo.name }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ userInfo.email }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ userInfo.phone || '-' }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="userInfo.status === 1 ? 'success' : 'danger'">
            {{ userInfo.status === 1 ? '启用' : '禁用' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="最后登录时间">{{ userInfo.lastLoginTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ userInfo.createTime }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ userInfo.updateTime || '-' }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 角色与权限卡片 -->
    <el-card class="info-card">
      <div class="card-header">
        <h2 class="card-title">角色与权限</h2>
      </div>
      <div class="role-permission-content">
        <div class="role-info">
          <span class="label">当前角色：</span>
          <el-tag type="primary" class="role-tag">{{ userInfo.roleName }}</el-tag>
        </div>
        <div class="permission-list">
          <span class="label">拥有权限：</span>
          <div class="permission-tags">
            <el-tag v-for="perm in userInfo.permissions" :key="perm.id" closable>{{ perm.name }}</el-tag>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 操作历史卡片 -->
    <el-card class="info-card">
      <div class="card-header">
        <h2 class="card-title">操作历史</h2>
      </div>
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in userInfo.operationHistory"
          :key="index"
          :timestamp="item.time"
          :type="item.type"
          :color="item.color"
        >
          <el-card>
            <h4>{{ item.title }}</h4>
            <p>{{ item.content }}</p>
            <p class="operator">操作人：{{ item.operator }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import {
  ArrowLeft,
  Edit
} from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';

// 路由实例
const router = useRouter();
const route = useRoute();

// 用户信息
const userInfo = reactive({
  id: '',
  username: '',
  name: '',
  email: '',
  phone: '',
  status: 1,
  roleId: '',
  roleName: '',
  lastLoginTime: '',
  createTime: '',
  updateTime: '',
  permissions: [],
  operationHistory: []
});

// 加载状态
const loading = ref<boolean>(true);

// 返回列表
const handleGoBack = () => {
  router.push({ name: 'UserList' });
};

// 编辑用户
const handleEdit = () => {
  router.push({ name: 'UserEdit', params: { id: userInfo.id } });
};

// 切换用户状态
const handleStatusChange = async () => {
  const newStatus = userInfo.status === 1 ? 0 : 1;
  const statusText = newStatus === 1 ? '启用' : '禁用';
  const confirmText = `确定要${statusText}用户